<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>角色添加</title>
    <!-- 导入jquery核心类库 -->
    <script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
    <!-- 导入easyui类库 -->
    <link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../js/easyui/ext/portal.css">
    <link rel="stylesheet" type="text/css" href="../../css/default.css">
    <script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../js/easyui/ext/jquery.portal.js"></script>
    <script type="text/javascript" src="../../js/easyui/ext/jquery.cookie.js"></script>
    <script src="../../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <!-- 导入ztree类库 -->
    <link rel="stylesheet" href="../../js/ztree/zTreeStyle.css" type="text/css"/>
    <script src="../../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // 授权树初始化
            var setting = {
                data: {
                    key: {
                        title: "t"
                    },
                    simpleData: {
                        enable: true
                    }
                },
                check: {
                    enable: true
                }
            };
            //异步加载树状菜单栏
            $.ajax({
                url: '../../menu_list.action',
                type: 'POST',
                dataType: 'text',
                success: function (data) {
                    var zNodes = eval("(" + data + ")");
                    $.fn.zTree.init($("#menuTree"), setting, zNodes);
                },
                error: function (msg) {
                    alert('树加载异常!');
                }
            });
            //异步加载权限栏
            $.post("../../permission_list.action", function (data) {
                $(data).each(function () {
                    var checkbox = $("<input type='checkbox' name='permissionIds'>");
                    checkbox.val(this.id);
                    $("#permissionTD").append(checkbox);
                    $("#permissionTD").append(this.name);
                })
            }, "json");

            // 点击保存
            $('#save').click(function () {
                if ($("#roleForm").form("validate")) {
                    var treeObj = $.fn.zTree.getZTreeObj("menuTree");
                    var nodes = treeObj.getCheckedNodes(true);
                    var array = new Array();
                    for(var i=0;i<nodes.length;i++) {
                        array.push(nodes[i].id);
                    }
                    var menuIds = array.join(',');
                    $("input[name='menuIds']").val(menuIds);
                    $("#roleForm").submit();
                } else {
                    $.messager.alert("提示信息", "输入信息有误", "warning");
                }
            });
        });
    </script>
</head>

<body class="easyui-layout">
<div region="north" style="height:31px;overflow:hidden;" split="false" border="false">
    <div class="datagrid-toolbar">
        <a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true">保存</a>
    </div>
</div>
<div region="center" style="overflow:auto;padding:5px;" border="false">
    <form id="roleForm" method="post" action="../../role_save.action">
        <table class="table-edit" width="80%" align="center">
            <tr class="title">
                <td colspan="2">角色信息</td>
            </tr>
            <tr>
                <td>名称</td>
                <td>
                    <input type="text" name="name" class="easyui-validatebox" data-options="required:true"/>
                </td>
            </tr>
            <tr>
                <td>关键字</td>
                <td>
                    <input type="text" name="keyword" class="easyui-validatebox" data-options="required:true"/>
                </td>
            </tr>
            <tr>
                <td>描述</td>
                <td>
                    <textarea name="description" rows="4" cols="60"></textarea>
                </td>
            </tr>
            <tr>
                <td>权限选择</td>
                <td id="permissionTD">
                </td>
            </tr>
            <tr>
                <td>菜单授权</td>
                <td>
                    <input type="hidden" name="menuIds"/>
                    <ul id="menuTree" class="ztree"></ul>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>

</html>